// duel-choose.js - 对决模式选择页面功能

let selectedMode = null;

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initializeModeCards();
    setupEventListeners();
});

// 初始化模式卡片
function initializeModeCards() {
    const cards = document.querySelectorAll('.mode-card');
    
    cards.forEach(card => {
        card.addEventListener('click', function() {
            selectMode(this);
        });
    });
}

// 设置事件监听器
function setupEventListeners() {
    // 选择按钮点击事件
    const selectButtons = document.querySelectorAll('.select-btn');
    selectButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation();
            const card = this.closest('.mode-card');
            selectMode(card);
            confirmSelection();
        });
    });
    
    // 返回按钮点击事件
    const backBtn = document.querySelector('.back-btn');
    if (backBtn) {
        backBtn.addEventListener('click', function(e) {
            e.preventDefault();
            goBack();
        });
    }
}

// 选择模式
function selectMode(card) {
    // 移除之前的选择状态
    const cards = document.querySelectorAll('.mode-card');
    cards.forEach(c => c.classList.remove('selected'));
    
    // 添加当前选择状态
    card.classList.add('selected');
    
    // 更新选择的模式
    selectedMode = card.dataset.mode;
    
    // 更新模式信息显示
    updateModeInfo();
}

// 更新模式信息显示
function updateModeInfo() {
    const infoTitle = document.querySelector('.info-title');
    const infoContent = document.querySelector('.info-content');
    
    if (!selectedMode) {
        infoTitle.textContent = '请选择对战模式';
        infoContent.textContent = '点击任意模式卡片查看详细信息和操作说明';
        return;
    }
    
    const modeInfo = {
        'local-pve': {
            title: '本地PVE模式',
            description: '玩家与AI对战，单人挑战电脑对手。AI会根据难度调整策略，提供不同级别的挑战。'
        },
        'local-pvp': {
            title: '本地PVP模式', 
            description: '两名玩家在同一设备上对战，分别使用WASD和方向键控制各自的蛇。考验反应速度和策略！'
        },
        'online-pvp': {
            title: '联机PVP模式',
            description: '与其他玩家在线对战（功能预留，暂未开放）。未来将支持实时多人对战功能。'
        }
    };
    
    const info = modeInfo[selectedMode];
    if (info) {
        infoTitle.textContent = info.title;
        infoContent.textContent = info.description;
    }
}

// 确认选择
function confirmSelection() {
    if (!selectedMode) {
        showMessage('请先选择一个对战模式！', 'warning');
        return;
    }
    
    // 检查联机模式是否可用
    if (selectedMode === 'online-pvp') {
        showMessage('联机PVP模式暂未开放，敬请期待！', 'info');
        return;
    }
    
    const confirmMessage = `确定选择${getModeName(selectedMode)}吗？`;
    
    if (confirm(confirmMessage)) {
        // 保存模式选择到本地存储
        localStorage.setItem('selectedDuelMode', selectedMode);
        
        // 根据选择的模式跳转到相应页面
        redirectToGamePage();
    }
}

// 跳转到游戏页面
function redirectToGamePage() {
    switch(selectedMode) {
        case 'local-pve':
            // 跳转到本地PVE游戏页面
            window.location.href = 'duel-pve.html';
            break;
        case 'local-pvp':
            // 跳转到本地PVP游戏页面
            window.location.href = 'duel-pvp.html';
            break;
        case 'online-pvp':
            // 联机模式暂不跳转
            showMessage('联机PVP模式开发中，敬请期待！', 'info');
            break;
        default:
            showMessage('未知模式选择！', 'error');
    }
}

// 获取模式名称
function getModeName(mode) {
    const names = {
        'local-pve': '本地PVE模式',
        'local-pvp': '本地PVP模式', 
        'online-pvp': '联机PVP模式'
    };
    return names[mode] || '未知模式';
}

// 显示消息
function showMessage(message, type = 'info') {
    // 创建消息元素
    const messageDiv = document.createElement('div');
    messageDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x mt-3`;
    messageDiv.style.zIndex = '9999';
    messageDiv.innerHTML = `
        <div class="d-flex align-items-center">
            <span>${message}</span>
            <button type="button" class="btn-close ms-2" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    // 添加到页面
    document.body.appendChild(messageDiv);
    
    // 3秒后自动消失
    setTimeout(() => {
        if (messageDiv.parentNode) {
            messageDiv.remove();
        }
    }, 3000);
}

// 返回上一页
function goBack() {
    window.history.back();
}

// 键盘快捷键支持
document.addEventListener('keydown', function(e) {
    switch(e.key) {
        case '1':
            selectMode(document.querySelector('.mode-card.local-pve'));
            break;
        case '2':
            selectMode(document.querySelector('.mode-card.local-pvp'));
            break;
        case '3':
            selectMode(document.querySelector('.mode-card.online-pvp'));
            break;
        case 'Enter':
            confirmSelection();
            break;
        case 'Escape':
            goBack();
            break;
    }
});

// 页面加载动画
window.addEventListener('load', function() {
    // 添加卡片加载动画
    const cards = document.querySelectorAll('.mode-card');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        
        setTimeout(() => {
            card.style.transition = 'all 0.5s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, index * 200);
    });
});